<template>
  <div class="element1">
    <div style="width: 100%;height:180px;background-color: #061F33;">
      <div class="tips">
        <span>L{{ titlename+1 }}组件</span>
      </div>
      <div style="width: 98%;height:150px;background-color: #061F33;display: flex;flex-direction: column;flex-wrap: wrap; justify-content: space-between;align-items: center;margin-left: 2%">

        <div v-for="(item, index) in sampleArray" :key="item" style="width: 41%;height: 25%;margin-right:0.5%; display: flex;flex-direction: row; justify-content: center">
          <div style="width:15%;color:white;font-size:10pt;margin-top: 4%">V{{ index+1 }}</div>
          <div style="width:80%;height:30px;color:white;border-style:solid;border-color:#243c78;margin:2% 5% 2% 5% ;text-align:center;position: relative">
            <p style="position: absolute;bottom: 1px;margin:0px;text-align: center;width: 100%">{{ item }}</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Mycircuit',
  props: {
    sampleArray: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => [1, 2, 3, 4],
      required: false

    },
    titlename: {
      type: Number,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => 1,
      required: false
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.tips{
  width: 100%;
  height: 30px;
  display: flex;
  /* justify-content: space-around;
  align-items: center; */
  color: rgb(6,203,255);
  text-align: left;
  text-indent: 10px;
  line-height: 40px;
}
</style>
